<!--
 * @Date: 2023-02-14 19:01:10
 * @LastEditTime: 2023-03-07 17:01:50
 * @LastEditTime: 2023-02-18 18:37:16
 * @FilePath: /hash-guess-game/src/views/arena/components/competition.vue
 * 介绍:竞技场.竞技
-->
<script lang="ts" setup>
import Dialog from "@@/components/rework/Dialog";
import { useI18n } from "vue-i18n";
import { RadioBtn, RadioBtnGroup } from "@@/components/rework/RadioBtn";
import { formatNumber } from "@@/utils/tools/tools";
import useBalanceStore, { CoinEnum } from "@@/store/useBalanceStore";
import toast from "@@/components/rework/toast";
import { sdkAutoTransfer } from "@@/sdk/solana";
import { apiRecharge } from "@@/api/module/transfer";
import { typeEnum } from "../mix";

const props = defineProps<{
  arenaData: { address: string; type: keyof typeof typeEnum };
}>();
const balanceStore = useBalanceStore();
const { coinEnum } = balanceStore;

const { t } = useI18n();

const DialogRef = ref<InstanceType<typeof Dialog>>();
/**显示组件 */
function open() {
  DialogRef.value?.open({ title: t("kai-shi-jing-ji") });
}
defineExpose({ open });
/**当前币种id */
const currentCoinId = ref<Id>(balanceStore.getByCode("HASH")?.id!);
changeCoin(currentCoinId.value);
function changeCoin(e: Id) {
  balanceStore.getBalance(balanceStore.getById(e)?.index);
}
/**当前选中的coin */
const currentCoin = computed<CoinEnum | undefined>(() => {
  return balanceStore.getById(currentCoinId.value);
});
/**表单数据 */
const formData = reactive<{
  amount: undefined | StrNumber;
}>({
  amount: undefined,
});
/**设置输入框 */
function setInput(value: StrNumber | undefined) {
  value = Number(value);
  if (isNaN(value)) value = undefined;
  formData.amount = value;
}
/**点击确定按钮 */
async function onOkbtn() {
  const coin = currentCoin.value;
  const amount = Number(formData.amount);
  if (!coin) return toast.text(t("qing-xuan-ze-bi-zhong"));
  if (!(amount && amount > 0))
    return toast.text(t("qin-shu-ru-zhen-que-de-jin-e"));
  //*特殊模式的提交前验证
  if (!typeEnum[props.arenaData.type].submitVerify(coin, amount)) return;
  if (!(!coin?.max || amount <= Number(coin.max)))
    return toast.text(`${t("bu-neng-da-yu")} ${coin?.max}`);
  if (!(!coin?.min || amount >= Number(coin?.min)))
    return toast.text(`${t("bu-neng-xiao-yu")} ${coin?.min}`);
  toast.loading();
  const res = await balanceStore.getBalance(
    balanceStore.getById(coin.id)?.index
  );
  toast.close();

  if (!(amount <= res)) return toast.text(t("yu-e-bu-zu"));
  transfer(coin, amount);
}
/**发起转账 */
async function transfer(coin: CoinEnum, amount: number) {
  toast.loading();
  const res = await sdkAutoTransfer(
    coin.contract_addr,
    amount,
    coin.format,
    props.arenaData.address
  );
  toast.close();
  if (!res.status) {
    toast.error(res.message, { closeOnClick: true, duration: -1 });
    return;
  }
  const txid = res.data!;
  await apiRecharge({
    type: props.arenaData.type,
    txid,
    coin_id: coin.id,
    chain: 99,
    number: amount,
  });
  const isSucceed = typeEnum[props.arenaData.type].isSucceed(txid, amount);
  if (isSucceed) toast.success("成功中奖");
  else toast.text("未能中奖");
}
</script>

<template>
  <Dialog class="competition" ref="DialogRef">
    <div class="Dialog_content auto-mt">
      <RadioBtnGroup @change="changeCoin" v-model="currentCoinId">
        <RadioBtn v-for="coin in coinEnum" :key="coin.id" :value="coin.id">
          {{ coin.code }}
        </RadioBtn>
      </RadioBtnGroup>
      <div class="competition_input">
        <VanField
          class="input-box_borderField"
          :type="'number'"
          :placeholder="$t('qing-shu-ru-jing-ji-shu-liang')"
          v-model="formData.amount"
        ></VanField>
        <div
          @click="setInput(currentCoin?.balance)"
          class="input-box_btn active T-nowrap"
        >
          {{ $t("quan-bu") }}
        </div>
      </div>
      <div class="competition_info T-S-middle">
        <div>
          {{ $t("wo-de-yue") }} :

          {{ formatNumber(currentCoin?.balance, 4) }}
        </div>
        <div v-if="currentCoin?.code.toUpperCase() == 'SOL'" class="T-minor">
          {{ $t("tips1") }}
        </div>
        <div style="color: var(--C-M2)">
          {{ $t("zui-gao-xian-e") }} :

          {{ formatNumber(currentCoin?.max, 4) }}
        </div>
        <div style="color: var(--C-M2)">
          {{ $t("zui-di-xian-e") }} :

          {{ formatNumber(currentCoin?.min, 4) }}
        </div>
      </div>
    </div>
    <template #footer>
      <VanButton
        @click="onOkbtn"
        class="footer_VanButton"
        block
        round
        color="var(--C-M1)"
      >
        {{ $t("jing-ji") }}
      </VanButton>
    </template>
  </Dialog>
</template>

<style lang="less" scoped>
.Dialog_content {
  padding: 0 var(--gap-md);
}
.footer_VanButton {
  padding: var(--gap-md);
}
.competition_input {
  display: flex;
  align-items: center;

  .input-box_borderField {
    border: var(--C-T1) 1rem solid;
    border-radius: 11rem;
  }
  .input-box_btn {
    color: var(--C-M1);
    margin-left: var(--gap-sm);
  }
}
</style>
